<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>京苏易购电子商务</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">


    <link rel="stylesheet" href="adminlte/plugins/select2/css/select2.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="adminlte/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../adminlte/css/SourceSans.css">

</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="index3.html" class="brand-link">
            <img src="adminlte/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">帷易胜(JD)商品管理</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <div th:replace="common/sidebar :: common_side('./', 'productimage')"></div>
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">主页</a></li>
                            <li class="breadcrumb-item active">商品图片</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                             <!-- /.card-header -->
                            <div class="card-body">

                                <form class="form-horizontal">
                                    <div class="card-body">
                                        <div class="row">

                                            <div class="col-2">
                                                <input type="text" name="wareId" class="form-control" placeholder="商品编号">
                                            </div>

                                            <div class="col-2">
                                                <input type="text" name="wareName" class="form-control" placeholder="商品名称">
                                            </div>

                                            <div class="col-2">
                                                <select class="select2 form-control" name="saleState">
                                                    <option value=""> -状态- </option>
                                                    <option value="0"  >下柜</option>
                                                    <option value="1"  >上柜</option>
                                                    <option value="2"  >可上柜</option>
                                                </select>
                                            </div>

                                            <div class="col-2">
                                                <select class="select2 form-control" name="isPrimary">
                                                    <option value=""> -是否有主图- </option>
                                                    <option value="0"  >无</option>
                                                    <option value="1"  >有</option>
                                                </select>
                                            </div>

                                            <div class="col-1">
                                                <a href="#"  class="btn btn-primary queryBtn">搜 索</a>
                                            </div>


                                        </div>
                                    </div>
                                </form>

                                <table id="productImageTable" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>商品编号</th>
                                        <th>商品名称</th>
                                        <th>状态</th>
                                        <th>主图</th>
                                        <th>盖亚</th>
                                        <th>更新时间</th>
                                        <th></th>
                                    </tr>
                                    </thead>

                                    <!--主图	商品编号	商品名称	状态	合规状态	最后更新时间	维护操作-->



                                    -
                                    <!--ware_id-->
                                    <!--String	1560	商品编号-->
                                    <!-- - -->
                                    <!--ware_name-->
                                    <!--String	京东电脑	商品名称-->
                                    <!-- - -->
                                    <!--sale_state-->
                                    <!--Number	1	上下柜状态-->
                                    <!-- - -->
                                    <!--modify_time-->
                                    <!--Date	2015-11-13 59:59:59	修改时间-->
                                    <!-- - -->
                                    <!--is_primary-->
                                    <!--Number	1	是否有主图-->
                                    <!-- - -->
                                    <!--is_gaea-->
                                    <!--Number	1	是否盖亚 0:非盖亚 1：盖亚-->

                                    <!--<tbody>-->

                                    <!--<tr th:each="brand, stat : ${brands}">-->
                                        <!--<td th:text="${stat.count}">1</td>-->
                                        <!--<td th:text="${brand.brandid}">Thymus Thymi</td>-->
                                        <!--<td th:text="${brand.name}">12</td>-->
                                        <!--<td th:text="${brand.account}">12</td>-->
                                    <!--</tr>-->



                                    <!--</tbody>-->
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->


    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">添加产线品牌</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form role="form" id="productimageAddForm">
                        <div class="card-body">
                            <div class="form-group">
                                <label>类目: </label>

                                <select class="select2 form-control" name="cateid" style="width: 60%">
                                    <option th:each = "category,stat:${categories}" th:value="${category.id}"  th:text="${category.name}"  >option 1</option>
                                </select>

                            </div>
                            <div class="form-group">
                                <label>品牌: </label>

                                <select class="select2 form-control" name="brandid" style="width: 60%">
                                    <option th:each = "brand,stat:${brands}" th:value="${brand.brandid}"  th:text="${brand.name}"  >option 1</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" id="productimageAddCancel" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" id="productimageAdd" class="btn btn-primary">保 存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="adminlte/plugins/select2/js/select2.full.min.js"></script>

<!-- page script -->
<script>

    $(document).ready(function (){

        $('.select2').select2();

        var table = $("#productImageTable").DataTable({
            language: {
                url: 'i18n/Chinese.json'
            },

            "paging": true,
            "lengthChange": true,
            "searching": false,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "responsive": true,

            serverSide: true,
            "ajax": {
                "url": "productimage/query",
                "data": function ( d ) {
                    var values = $("form.form-horizontal").serializeArray();

                    var data = {};
                    $.each(values, function (index, item) {
                        data[item.name] = item.value;
                    });

                    return $.extend( {}, d, data);
                }
            },
            columns: [
                {
                    data : null,
                    bSortable : false,
                    width : "30px",
                    render : function(data, type, row, meta) {
                        // 顯示行號
                        var startIndex = meta.settings._iDisplayStart;
                        return startIndex + meta.row + 1;
                    }
                },
                {"data": "wareId", "width": "100px",
                    render: function(data, type, row, meta) {
                        var html = [];
                        html.push('<a href="primarypic/'+ data +'" target="_blank" >'+ data +'</a>');
                        return html.join('');
                    }
                },
                {"data": "wareName", "width": "150px",
                    render: function(data, type, row, meta) {
                        var html = [];
                        html.push('<a href="primarypic/'+ row["wareId"] +'" target="_blank" >'+ data +'</a>');
                        return html.join('');
                    }
                },
                {"data": "saleState", "width": "100px",
                    "render":function(data, type, full, meta){
                        if(data == 0){
                            data ="<span>下柜</span>";
                        } else if( data==2) {
                            data ="<a href='#' class='upOrderStatus' data-id="+full.id+"><font color='red'>可上柜</font></a>";
                        } else if(data==1) {
                            data ="<a href='#' class='upOrderStatus' data-id="+full.id+"><font color='green'>上柜</font></a>";
                        }
                        return	 data;
                    }
                },
                {"data": "isPrimary", "width": "150px",
                    "render":function(data, type, full, meta){
                        if(data==1){
                            data ="<span>有</span>";
                        }else{
                            data ="<span><font color='red'>无</font></span>";
                        }
                        return	 data;
                    }
                },
                {
                    "data": "isGaea", "width": "150px",
                    "render":function(data, type, full, meta){
                        if(data==1){
                            data ="<span>是</span>";
                        }else{
                            data ="<span><font color='dimgray'>否</font></span>";
                        }
                        return	 data;
                    }
                },
                {"data": "modifyTime", "width": "150px"},
                {
                    "data" : null,
                    "render" : function(data, type,row) {
                        var id = '"' + row.id + '"';
                        var html = "<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class=' glyphicon glyphicon-eye-open'></i> 查看</a>"
                        html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class=' glyphicon glyphicon-edit'></i> 编辑</a>"
                        return html;
                    },
                    "width": "150px"
                }
                //{"data": "account", "width": "80px"}

                /**
                 *
                 *   <th>商品编号</th>
                 <th>商品名称</th>
                 <th>状态</th>

                 <th>主图</th>
                 <th>盖亚</th>
                 <th>更新时间</th>
                 *
                 * isGaea: 1
                 isPrimary: 0
                 modifyTime: "2020-12-19T03:10:50.000+00:00"
                 saleState: 0
                 wareId: "100009711245"
                 wareName: "京苏经济型TERRY隔热手套"
                 */
            ]
        });

        //

        $("#productimageAdd").click(function(){
            var values = $("#productimageAddForm").serializeArray();

            var params = {};
            $.each(values, function (index, item) {
                params[item.name] = item.value;
            });

            $.ajax({
                type: 'POST',
                url: "productimage/add",
                data: params,
                success: function (result) {
                    debugger;

                    if ( !!result && result.success ) {
                        $("#productimageAddCancel").click();
                    }

                    if ( !!result && !!result.msg ) {
                        alert(result.msg);
                    }

                    table.ajax.reload();
                },
                dataType: "json"
            });
        });

        $("a.queryBtn").click(function(){
            table.ajax.reload();
        });

    });
</script>
</body>
</html>
